<template>
	<view>
		<uni-transition :mode-class="['slide-bottom']" :show="!!cartNum || requireCart.length > 0" :styles="cartBarStyles">
			<view class="left">
				<view class="detail-action" @tap="details">
					<image src="/static/images/index/icon_shopping_bag.png" class="shopbag-btn"></image>
					<view class="badge">{{ cartNum + requireCartNum }}</view>
				</view>
				<view class="price">
					<text class="fsize-24">￥</text>
					<text>{{ cartPrice }}</text>
				</view>
			</view>
			<view v-if="isDesk" type="primary" class="right" @tap="pay">立即支付</view>
			<!-- 多了立即下单 -->
			<view v-else type="primary" class="right" @tap="onOrder">立即下单</view>
		</uni-transition>
		<view class=""></view>
		<cart-popup :requireCart="requireCart" :cart="cart" ref="cartPopup" @add="add" @minus="minus" @clear="clear"></cart-popup>
	</view>
</template>

<script>
import uniTransition from '@/components/uni-transition/uni-transition.vue';
import cartPopup from '../cart-popup/cart-popup.vue';
import { mapState } from 'vuex';
export default {
	name: 'CartBar',
	components: {
		uniTransition,
		cartPopup
	},
	props: {
		cart: {
			type: Array,
			default: () => []
		},
		requireCart: {
			type: Array,
			default: () => []
		}
	},
	created() {
		this.onIsDesk();
	},
	updated() {
		this.onIsDesk();
	},
	computed: {
		...mapState(['userInfo']),
		cartNum() {
			//计算购物车总数
			// console.log(this.cart);
			return this.cart.reduce((acc, cur) => acc + cur.number, 0);
		},
		requireCartNum() {
			// console.log(this.cart);
			return this.requireCart.reduce((acc, cur) => acc + cur.fQty, 0);
		},
		cartPrice() {
			//计算购物车总价
			// const price = this.cart.reduce((acc, cur) => acc + cur.number * cur.FPosPrice, 0)
			// if (this.cart.vipPrice === 0) {
			// 	console.log(this.requireCart.reduce((a,b) => a + (b.fPosPrice * b.fQty), 0));
			// 	const price = this.cart.reduce((acc, cur) => acc + cur.number * cur.FPosPrice, 0) + this.requireCart.reduce((a,
			// 		b) => a + (b.fPosPrice * b.fQty), 0)
			// 	return price.toFixed(2)
			// } else {
			// 	console.log(1223);
			// 	const price = this.cart.reduce((acc, cur) => acc + cur.number * cur.vipPrice, 0) + this.requireCart.reduce((a,
			// 		b) => a + (b.fPosPrice * b.fQty), 0)
			// 	return price.toFixed(2)
			// }
			// console.log(this.cart, this.requireCart);
			const price =
				this.cart.reduce((acc, cur) => {
					if (cur.discountPrice) {
						return acc + cur.discountPrice * cur.number;
					} else {
						if (this.userInfo.id && cur.vipPrice !== 0) {
							return acc + cur.vipPrice * cur.number;
						} else {
							// 没有会员
							return acc + cur.FPosPrice * cur.number;
						}
					}
				}, 0) +
				this.requireCart.reduce((a, b) => {
					if (b.discountPrice) {
						return a + b.discountPrice * b.fQty;
					} else {
						if (this.userInfo.id && b.vipPrice !== 0) {
							return a + b.vipPrice * b.fQty;
						} else {
							return a + b.fPosPrice * b.fQty;
						}
					}
				}, 0);
			return price.toFixed(2);
		}
	},
	data() {
		return {
			isDesk: true,
			cartBarStyles: {
				position: 'fixed',
				bottom: '10rpx',
				left: '20rpx',
				// #ifdef H5
				bottom: 'var(--window-bottom)',
				// #endif
				width: '710rpx',
				'z-index': '995',
				height: '92rpx',
				background: 'rgba(255,255,255,0.96)',
				display: 'flex',
				'justify-content': 'space-between',
				'align-items': 'center',
				border: '1px solid #f0f0f0',
				'border-radius': '46rpx'
			}
		};
	},
	methods: {
		onIsDesk() {
			const res = uni.getStorageSync('deskId') || 0;
			if (res === 0) {
				this.isDesk = true;
			} else {
				this.isDesk = false;
			}
		},
		details() {
			// 打开cartPopup弹出层
			this.$refs['cartPopup'].open();
			// console.log('open')
		},
		add(product) {
			this.$emit('add', {
				...product,
				number: 1
			});
		},
		minus(product) {
			this.$emit('minus', product);
		},
		clear() {
			this.$emit('clear');
		},
		pay() {
			this.$emit('pay');
		},
		// 立即下单
		onOrder() {
			this.$emit('onOrder');
		}
	},
	watch: {
		cartNum(val) {
			if (!val) {
				this.$refs['cartPopup'].close();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.left {
	display: flex;
	align-items: center;

	.detail-action {
		box-shadow: 0 10rpx 10rpx 0 rgba($color: #c8c7cc, $alpha: 0.2);
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 100rpx;
		margin-right: 60rpx;
		margin-left: 20rpx;

		.shopbag-btn {
			display: block;
			width: 138rpx;
			height: 110rpx;
			position: absolute;
			left: 0;
			bottom: 20rpx;
		}

		.badge {
			width: 36rpx;
			height: 36rpx;
			font-size: 20rpx;
			color: #111111;
			line-height: 36rpx;
			background: linear-gradient(34deg, #f3c45d, #edac2f);
			border: 1px solid #f5f5f5;
			border-radius: 50%;
			text-align: center;
			position: absolute;
			right: -38rpx;
			top: -20rpx;
		}
	}

	.price {
		font-size: 36rpx;
		font-weight: bold;
		color: #111111;
	}
}

.right {
	width: 200rpx;
	height: 84rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #111111;
	line-height: 84rpx;
	text-align: center;
	background: linear-gradient(34deg, #f3c45d, #edac2f);
	border-radius: 42rpx;
}
</style>
